<template>
  <div class="reactiveCreate">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万元</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试：</h2>
    <h2>{{ obj.a.b.c.d }}</h2>
    <h2>基本类型测试</h2>
    <h2>{{ base }}</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
    <button @click="test">测试</button>
  </div>
</template>

<script lang="ts" setup> //使用setup语法糖，不用写return
import { reactive } from "vue"; //引入reactive
import { ref } from "vue"; //引入ref
// 数据
let car = reactive({ brand: "奔驰", price: 28 });
let games = reactive([
  { id: "01", name: "LOL" },
  { id: "02", name: "CF" },
  { id: "03", name: "原神" },
]);
let obj = reactive({ a: { b: { c: { d: 666 } } } });
// let base  = reactive("基本") //报错，类型为“string”的参数不可分配给类型为“object”的参数。只能用ref
let base = ref("基本"); //基本类型需要用ref

// 方法
function changeCarPrice() {
  car.price += 10;
}
function changeFirstGame() {
  games[0].name = "流星";
}
function test() {
  obj.a.b.c.d = 999;
}
</script>


<style scoped>
.reactiveCreate {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>